<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情-秒杀</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container mt-4">
    <!-- 面包屑 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a th:href="@{/goods}">秒杀专场</a></li>
            <li class="breadcrumb-item active" th:text="${goods.goodsName}">商品名称</li>
        </ol>
    </nav>

    <div class="row">
        <!-- 左侧大图 -->
        <div class="col-md-6">
            <img th:src="${goods.goodsImg}" class="img-fluid rounded" alt="商品图">
        </div>

        <!-- 右侧信息 -->
        <div class="col-md-6">
            <h2 th:text="${goods.goodsName}">商品名称</h2>
            <p class="text-muted" th:text="${goods.goodsTitle}">短标题</p>

            <!-- 价格 -->
            <div class="d-flex align-items-center mb-3">
                <span class="text-danger fw-bold fs-3">¥</span>
                <span class="text-danger fw-bold fs-1" th:text="${goods.seckillPrice}">0.00</span>
                <del class="text-secondary ms-3" th:text="'¥'+${goods.goodsPrice}">原价</del>
            </div>

            <!-- 库存 & 倒计时 -->
            <div class="alert alert-warning d-flex justify-content-between align-items-center">
                <span>仅剩 <strong th:text="${goods.stockCount}">0</strong> 件</span>
                <span id="countDown" class="mb-0"
                      th:data-start="${goods.startDate}"
                      th:data-end="${goods.endDate}">加载倒计时...</span>
            </div>

            <!-- 下单表单 -->
            <form th:action="@{/seckill-goods/semiskilled}" method="post" class="mt-4">
                <input type="hidden" name="goodsId" th:value="${goods.id}">
                <button class="btn btn-danger btn-lg w-100"
                        id="submitBtn"
                        disabled
                        th:text="${goods.stockCount <= 0 ? '已售罄' : '立即抢购'}">立即抢购</button>
            </form>

            <!-- 商品详情富文本 -->
            <div class="mt-5" th:utext="${goods.goodsDetail}">详情</div>

            <!-- 后端错误信息 / 商品ID -->
            <input type="hidden" id="errorMsg" th:value="${error}">
            <input type="hidden" id="goodsId"   th:value="${goods.id}">
        </div>
    </div>
</div>

<!-- Bootstrap & 倒计时 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    /* ====================== 倒计时逻辑（原样） ====================== */
    (function(){
        const el  = document.getElementById('countDown');
        const start = new Date(el.dataset.start).getTime();
        const end   = new Date(el.dataset.end).getTime();
        const btn = document.getElementById('submitBtn');
        const soldOut = btn.textContent.trim() === '已售罄';

        const timer = setInterval(function(){
            const now = Date.now();
            if (now < start) {
                el.textContent = '秒杀未开始';
                btn.disabled = true;
            } else if (now >= end) {
                el.textContent = '秒杀已结束';
                btn.disabled = true;
                clearInterval(timer);
            } else {
                const t = end - now;
                const h = String(Math.floor(t / 3600000)).padStart(2,0);
                const m = String(Math.floor(t % 3600000 / 60000)).padStart(2,0);
                const s = String(Math.floor(t % 60000 / 1000)).padStart(2,0);
                el.textContent = `距结束 ${h}:${m}:${s}`;
                btn.disabled = soldOut;
            }
        }, 1000);
    })();

    /* ====================== 错误信息处理（POST 跳转版） ====================== */
    document.addEventListener('DOMContentLoaded', () => {
        const err     = document.getElementById('errorMsg')?.value?.trim();
        const goodsId = document.getElementById('goodsId').value;
        if (!err) return;

        if (err === '正在排队中') {
            if (confirm(err)) {          // 用户点“确定”
                // 动态创建隐藏表单，POST 跳转到排队页面
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/seckill-goods/getResult';   // 你的排队页面地址
                form.style.display = 'none';

                const input = document.createElement('input');
                input.type  = 'hidden';
                input.name  = 'goodsId';
                input.value = goodsId;
                form.appendChild(input);

                document.body.appendChild(form);
                form.submit();
            }
        } else {
            alert(err);   // 其它错误直接提示
        }
    });
</script>
</body>
</html>